<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
    <div class="slides">
        <section>
            <h3>css有哪些属性可以继承？</h3>

            <p>分享人：郭健锋</p>
        </section>
        <section>
            <p>目录</p>

            <p>1.背景介绍</p>

            <p>2.知识剖析</p>

            <p>3.常见问题</p>

            <p>4.解决方案</p>

            <p>5.编码实战</p>

            <p>6.扩展思考</p>

            <p>7.参考文献</p>
        </section>
        <section>
            <h3>1.背景介绍</h3>
        </section>
        <section>
            <p>在我们深入探讨继承之前，有必要先理解文档树。所有的HTMl文档都是树，文档树由HTML元素组成,文档树和家族树类似，也有祖先、后代、父亲、孩子、兄弟</p>
            <img src="../img/css-06-inherit/img1.png" alt="" width="449" height="234">
        </section>
        <section>
            <p>祖先指任意相连，但是在文档树上部的元素。</p>
            <img src="../img/css-06-inherit/img6.png" height="268" width="623"/>
            <p>后代指任意相连，但是在文档树下部的元素。</p>
            <img src="../img/css-06-inherit/img7.png" height="266" width="621"/>
        </section>
        <section>
            <p>父辈指相连并且直接在该元素上部的元素。</p>
            <img src="../img/css-06-inherit/img8.png" height="258" width="623"/>
            <p>子辈指相连并且直接在该元素下部的元素。</p>
            <img src="../img/css-06-inherit/img9.png" height="251" width="630"/>
        </section>
        <section>
            <p>兄弟指与其他元素共享一个父辈的元素。</p>
            <img src="../img/css-06-inherit/img10.png" height="253" width="630"/>
        </section>
        <section>
            <p>除此之外还有必要先知道CSS的规则，CSS规则告诉浏览器如何去渲染HTML页面上的特定元素。</p>
            <p>1:选择器“选择”受此规则影响的HTML页面上的元素。</p>
            <pre>
            <code>
                   p { color:   red     ;}
                //Selector
            </code>
            </pre>
            <p>2:声明部分是由一对大括号以及其中任意内容组成的容器。</p>
            <pre>
            <code>
                   p { color:   red     ;}
                      //Declaration block
            </code>
            </pre>
        </section>
        <section>
            <p>3:声明告诉浏览器如何去渲染页面上被选中的元素。</p>
            <pre>
            <code>
                   p { color:   red     ;}
                        //Declaration
            </code>
            </pre>
            <p>4:属性告诉你选中元素的样式外观。</p>
            <pre>
            <code>
                   p { color:   red     ;}
                      //Property
            </code>
            </pre>
        </section>
        <section>
            <p>5:值是你希望给属性设置准确的样式。</p>
            <pre>
            <code>
                   p { color:   red     ;}
                                //Value
            </code>
            </pre>
        </section>
        <section>
            <h3>2.知识剖析</h3>
            <p>现在我们可以进入正题了。</p>
            <p>css样式表继承指的是，特定的css属性向下传递到后代元素</p>
        </section>
        <section>
            <p>为了看到继承的实际应用，我们将使用下面的HTML代码。</p>
            <pre>
            <code>
                  <p>
                      Lorem <em>ipsum</em> dolor sit amet consect etuer.
                  </p>
            </code>
            </pre>
            <p>注意: em元素在
                p元素的内部。 </p>
            <img src="../img/css-06-inherit/img11.png" height="226" width="440"/>
        </section>
        <section>
            <p>我们也使用CSS代码。注意：em元素未指定样式。</p>
            <pre>
            <code>
                p { color:   red     ;}
            </code>
            </pre>
            <p>在浏览器中， p元素和 em元素同时变红。</p>
            <img src="../img/css-06-inherit/img12.png" height="132" width="416"/>
        </section>
        <section>
            <p>但是为什么em元素会变红？其并没有设置颜色样式。</p>
            <p>因为em元素继承了p元素的颜色属性。</p>
            <p>继承是网页开发者更加轻松，否则我们就要对所以的子孙元素指定属性。</p>
            <pre>
            <code>
                p { color:   red     ;}
                p em{ color:   red     ;}
            </code>
            </pre>
            <p>CSS文件大小将会大大增加，变得更难创建与维护，同时降低了下载速度。</p>
        </section>
        <section>
            <h3>3.常见问题</h3>
            <p>是否所以的CSS属性都可以继承呢？</p>
        </section>
        <section>
            <p>非也！并非所以的CSS属性都支持继承。</p>
            <p>如果每个CSS属性都继承，对于作者而言，反而会让事情更糟。</p>
            <p>开发人员需要将子孙元素不需要的CSS属性一个一个地“关掉”。</p>
        </section>
        <section>
            <p>我们可以设想下，如果默认状态下，border属性是可以继承的...</p>
            <p>然后我们将border属性应用于p元素，结果？</p>
            <pre>
            <code>
                p { border: 1px solid red;}
            </code>
            </pre>
            <p>结果在p里面em元素也有了红色边框。</p>
            <img src="../img/css-06-inherit/img13.png" height="145" width="411"/>
        </section>
        <section>
            <p>幸运的是，边框是非继承的，所以em元素是没有边框的。</p>
            <img src="../img/css-06-inherit/img14.png" height="150" width="409"/>
            <p>通常来说，仅仅那些使我们工作轻松的属性是继承的。</p>
        </section>
        <section>
            <h3>4.解决方案</h3>
            <p>那么有哪些属性可以自动继承呢</p>
        </section>
        <section>
            <p>有继承性的属性：<br>
            <pre style="box-shadow: none;font-size: 20px ">

        1、字体系列属性

        font：组合字体

        font-family：规定元素的字体系列

        font-weight：设置字体的粗细

        font-size：设置字体的尺寸

        font-style：定义字体的风格

        font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为
        大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

        font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持。

        font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 "x" 的高度与
        "font-size" 高度之间的比率被称为一个字体的 aspect 值。这
        样就可以保持首选字体的 x-height。

        </pre>
            </p>
        </section>
        <section>
            <p>有继承性的属性：<br>
            <pre style="box-shadow: none;font-size: 20px ">

        2、文本系列属性

        text-indent：文本缩进

        text-align：文本水平对齐

        line-height：行高

        word-spacing：增加或减少单词间的空白（即字间隔）

        letter-spacing：增加或减少字符间的空白（字符间距）

        text-transform：控制文本大小写

        direction：规定文本的书写方向

        color：文本颜色

        </pre>
            </p>
        </section>
        <section>
            <p>有继承性的属性：<br>
            <pre style="box-shadow: none;font-size: 20px ">

        3、元素可见性：visibility

        4、表格布局属性：caption-side、border-collapse、border-spacing、
        empty-cells、table-layout

        5、列表属性：list-style-type、list-style-image、list-style-position、list-style

        6、生成内容属性：quotes

        7、光标属性：cursor

        8、页面样式属性：page、page-break-inside、windows、orphans

        9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、
        speech-rate、volume、voice-family、pitch、pitch-range、
        stress、richness、、azimuth、elevation

        </pre>
            </p>
        </section>
        <section>
        <pre style="box-shadow: none;font-size: 25px ">
        <p>所有元素可以继承的属性：<br>
        1、元素可见性：visibility、opacity
        2、光标属性：cursor
        <p> 内联元素可以继承的属性:</p>
        1、字体系列属性
        2、除text-indent、text-align之外的文本系列属性
        <p>块级元素可以继承的属性:</p>
        1、text-indent、text-align
        </pre>
        </section>
        <section>
            <p>无继承的属性<br>
            <pre style="box-shadow: none;font-size: 25px ">

        1、display
        2、文本属性：vertical-align：
        text-decoration：
        text-shadow：
        white-space：
        unicode-bidi：
        3、盒子模型的属性:宽度、高度、内外边距、边框等
        4、背景属性：背景图片、颜色、位置等
        5、定位属性：浮动、清除浮动、定位position等
        6、生成内容属性:content、counter-reset、counter-increment
        7、轮廓样式属性:outline-style、outline-width、outline-color、outline
        8、页面样式属性:size、page-break-before、page-break-after
        </pre>
        </section>
        <section>
            <p>继承中比较特殊的几点</p>
            <p>1、a 标签的字体颜色不能被继承</p>
            <p>1、&lth1&gt-&lth6&gt标签字体的大下也是不能被继承的</p>
            <p>因为它们都有一个默认值</p>
        </section>
        <section>
            <h3>5.编码实战</h3>
            <p>font-size的继承是如何实现的？</p>
        </section>
        <section>
            <p>实例一:像素</p>
            <p>p 元素设置了14px的font-size大小。</p>
            <pre>
            <code>
                p { font-size:14px;}
            </code>
            </pre>
            <p>改像素值（14px）重写了浏览器默认的font-size大小。在这个新值被后代继承了。</p>
        </section>
        <section>
            <p>实例二:百分比</p>
            <p>p 元素设置了85%的font-size大小。</p>
            <pre>
            <code>
                p { font-size:85%;}
            </code>
            </pre>
            <p>浏览器默认的font-size大小和百分比值被用来生成计算后的值。在这个新值被后代继承了。</p>
        </section>
        <section>
            <p>实例三:em单位</p>
            <p>p 元素设置了0.85em的font-size大小。</p>
            <pre>
            <code>
                p { font-size:.85em;}
            </code>
            </pre>
            <p>浏览器默认的font-size和em值（.85em）被用来生成计算后的值。在这个新值被后代继承了。</p>
        </section>
        <section>
            <h3>6.扩展思考</h3>
        </section>
        <section>
            <p>开发者如何使用继承书写高效的CSS代码。</p>
            <p>例如，你可以设置color，font-size和font-family在body元素上。</p>
            <pre>
            <code>
                body {
                color:#222;
                font-family:arial,helvetica,sans-serif;
                font-size:90%;
                }
            </code>
            </pre>
        </section>
        <section>
            <p>这些属性会被继承到所有后代元素上。</p>
            <img src="../img/css-06-inherit/img15.png" height="240" width="496"/>
            <p>然后你可以重写你需要的属性值，制定性的颜色值</p>
            <pre>
            <code>
                h1,h2,h3 {color:green;}
                h4,h5,h6 {color:black;}
            </code>
            </pre>
        </section>
        <section>
            <p>新的font-family值</p>
            <pre>
            <code>
                h1,h2,h3,h4,h5,h6 {font-family:georgia,times,serif;}
            </code>
            </pre>
            <p>以及需要的font-size值。</p>
            <pre>
            <code>
                h1{ font-size: 200%; }
                h2{ font-size: 150%; }
                h3{ font-size: 125%; }
                #footer{ font-size: 90%;}
            </code>
            </pre>
        </section>
        <section>
        <h3>7.参考文献</h3>
        <p>参考一：<a href="https://www.slideshare.net/zhangxinxu/css-4863848">CSS之继承详解</a></p>
        </section>
        <!--<section>-->
        <!--<h3>8.更多讨论</h3>-->
        <!--</section>-->
        <!--<section>-->
        <!--<p>除了inherit关键字外，还有什么其他的关键字继承特性</p>-->
        <!--</section>-->
        <!--<section>-->
        <!--<p>在css3中新增加了几个继承特性</p>-->
        <!--<p>initial:用来设置css属性值为它的默认值，也就是浏览器默认设置的css属性值。</p>-->
        <!--<p>unset:一个属性定义了unset值，如果该属性是默认继承属性，该值等同于inherit，如果该属性是非继承属性，该值等同于initial</p>-->
        <!--<p>all: [ inherit | initial | unset ]:-->
        <!--最后，all是一个属性而不是一个值。你可以指定inherit、initial或者unset来影响所有的属性，例如重置所有CSS属性为浏览器默认：</p>-->
        <!--</section>-->
        <section>
        <h4>鸣谢</h4>
        <p>感谢大家观看</p>
        <p>BY : 郭健锋</p>
        </section>

    </div>
</div>

<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>

<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {
                src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            }
        ]
    });
</script>

</body>
</html>